<template>
  <!-- 蒙层 -->
  <view clas="c-mask" v-if="showInputPop" class="c-mask" @click.stop="closeInputPop"
        @touchmove.stop.prevent="emit('disableScroll')">
  </view>
  <view class="popup-comment" v-if="showInputPop">
    <view class="comment-input-wrap">
      <view class="comment-top-tool flex flex-row justify-between">
        <view>
          <slot name="ctt-left"></slot>
        </view>
        <view class="flex flex-row">
          <slot name="ctt-right"></slot>
          <iconfont v-if="extendComment" @click="toggleExtendComment" color="#000" name="icon-suoxiao"></iconfont>
          <iconfont v-else @click="toggleExtendComment" color="#000" name="icon-kuoda"></iconfont>
        </view>
      </view>
      <view class="comment-textarea-box" @touchmove.stop.prevent="emit('disableScroll')">
        <textarea
          v-model="commentParams.content"
          :class="['comment-textarea', {['is-extend']: extendComment}]"
          :maxlength="maxlength"
          :focus="replyFocus"
          :placeholder="customPlaceholder"
          :show-confirm-bar="false"
          @focus="commentInputFocus"
          @blur="commentInputBlur"
          :adjust-position="true"
          :cursor-spacing="400"
          :cursor="cursorIndex"
          @input="inputFocusChange"
          :fixed="true"
        />
        <view class="limit">{{ commentParams.content?.length || 0 }} / 600</view>
      </view>
      <view class="image-list">
        <view class="image-item" v-for="(item, index) in commentImages" :key="index">
          <image class="image" :src="item" mode="aspectFill" @click.stop="previewCommentImage(item)"></image>
          <uni-icons class="icon-close" @click.stop="deleteOneCommentImage(index)" type="clear" size="20"
                     color="#red"></uni-icons>
        </view>
      </view>
      <view class="release-bottom-tool flex flex-row justify-between">
        <!-- 表情 和 图片 -->
        <view class="keyboard-toggle-box flex flex-row align-center">
          <slot name="keyboard-other-tool"></slot>
          <!-- 选择上传图片 -->
          <view v-if="uploadImage" class="as-image" hover-class="checkActive" :hover-stay-time="100"
                @click="selectMediaImage">
            <iconfont color="#000" name="icon-tupian"></iconfont>
          </view>
          <!-- 键盘 -->
          <view class="keyboard" hover-class="checkActive" :hover-stay-time="100"
                @click="openKeyboard">
            <iconfont color="#000" name="icon-jianpan"></iconfont>
          </view>
        </view>
        <!-- 发布 微信小程序插槽注册页面时会多嵌入一层 -->
        <view class="release-btn">
          <slot name="release-btn"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { useFileUpload } from '@/utils/uploadFile'

defineOptions({ name: 'TextareaComment'})

const props = defineProps({
  showInputPop: {
    type: Boolean,
    default: false,
  },
  uploadImage: {
    type: Boolean,
    default: false,
  },
  maxlength: {
    type: Number,
    default: 600,
  }
})

const emit = defineEmits([
  'closeInputPop',
  'disableScroll',
  'update:showInputPop',
])

// 新增评论入参
const commentParams = ref({ content: '' } as any)

// 评论上传的图片
const commentImages = ref<string[]>([])

// 点击回复控制textarea的聚焦
const replyFocus = ref<boolean>(false)
// 默认的提示内容
const customPlaceholder = ref<string>('输入内容')
// 是否扩展内容的显示
const extendComment = ref<boolean>(false);
// 是否显示表情包
const showEmoji = ref<boolean>(false)
// 记录当前光标位置
const cursorIndex = ref<number>(0)
// 评论时鼠标光标 的位置
const cursorInputIndex = ref<number>(-1)
// 评论框打开
const inputFocus = (e?: Event) => {
  nextTick(() => {
    replyFocus.value = true
    cursorIndex.value = cursorInputIndex.value
    customPlaceholder.value = '输入内容'
  })
}

function toggleExtendComment(e: Event) {
  commentInputFocus(e);
  extendComment.value = !extendComment.value
}

// 评论框聚焦
const commentInputFocus = (event: any) => {
  replyFocus.value = true
  showEmoji.value = false
}
// 评论失焦
const commentInputBlur = (event: any) => {
  cursorInputIndex.value = event.detail.cursor
  replyFocus.value = false
}
// 输入时光标的位置
const inputFocusChange = (event: any) => {
  cursorInputIndex.value = event.detail.cursor
}


// 打开键盘
const openKeyboard = () => {
  replyFocus.value = true
}


// 预览评论的图片
const previewCommentImage = (image: string) => {
  uni.previewImage({
    current: image,
    urls: commentImages.value,
  })
}

// 删除某一张评论图片
const deleteOneCommentImage = (index: number) => {
  commentImages.value.splice(index, 1)
}

function closeInputPop() {
  emit('closeInputPop')
  emit('update:showInputPop', false)
}


// 选择上传媒体相册中的图片 uniapp的方法
function selectMediaImage() {
  uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['album'],
    camera: 'back',
    success: (res: any) => {
      const tempFilePaths = res.tempFiles?.map((item: any) => item.tempFilePath)
      for (const tempFilePath of tempFilePaths) {
        // 封装的的上传文件方法，可以改为自己的方法，也可以查看前面发布的文章里有这个方法
        useFileUpload(tempFilePath, commentImages.value, {})
      }
    }
  })
}

defineExpose({
  inputFocus,
  openKeyboard,
  commentParams,
})
</script>

<style lang="scss">
.c-mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 555;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-comment {
  transition: all 0.3s;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 666;
  width: 100%;
  background-color: #fff;

  .comment-input-wrap {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .comment-textarea-box {
      position: relative;
      margin-top: 20rpx;

      .comment-textarea.is-extend {
        height: 400rpx;
        max-height: calc(100vh - 400rpx);
      }

      .comment-textarea {
        transition: all 0.3s;
        border-radius: 20rpx;
        height: 160rpx;
        width: auto;
        background-color: #f6f6f6;
        font-size: 26rpx;
        padding: 20rpx;
        box-sizing: border-box;
      }

      .limit {
        // 定位到textarea 的 右下角
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        font-size: 20rpx;
        color: #767676;
      }
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      margin: 10rpx 0;

      .image-item {
        position: relative;
        width: 90rpx;
        height: 90rpx;
        margin-right: 10rpx;
        background-color: #fff;

        .image {
          border-radius: 20rpx;
          width: 100%;
          height: 100%;
        }

        .icon-close {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }

    .release-bottom-tool {
      margin-top: 10rpx;

      // padding: 0 20rpx;
      .keyboard-toggle-box {
        display: flex;
        align-items: center;
        font-size: 48rpx;
        color: #3d3d3d;

        .as-image,
        .emoji {
          margin-right: 20rpx;
        }
      }

      .limit {
        font-size: 24rpx;
        color: #767676;
      }

      .release {
        background-color: $uni-color-primary;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx 20rpx;
        box-sizing: border-box;
      }
    }

    .emoji-data {
      display: flex;
      flex-wrap: wrap;
      height: 300rpx;
      overflow: scroll;
      margin-top: 16rpx;

      .emoji-item {
        padding: 10rpx;
      }

      .emoj_conn {
        font-size: 40rpx;
      }
    }
  }
}
</style>
